<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="root">
    <h1>你好，{{name}}</h1>
</div>
    <script type="text/javascript">
        Vue.config.productionTip = false;  //阻止Vue在启动时生成 生产提示

        //el的两种写法
        /*const v =  new Vue({
         el:'#root', //第一种写法
         data:{
             name:"jack"
         }
        })
        console.log(v);
        v.$mount('#root') //第二种写法 Mount-- 挂载 */


        //data的两种写法
         const v =  new Vue({
         el:'#root', 
         //data的第一种写法：对象式
        //  data:{
        //     name:'jack'
        //  }

         // data的第二种写法：函数时
         data(){
             console.log('!!!',this);
             return{
                name:'jack'
             }
         }
        })
 </script>
</body>
</html>